<template>
  <view>
    <!-- 场外 -->
    <view class="order-wrap" v-if="tradeScene == 1">
      <view class="order-list">
        <view class="order-item" v-for="item in orderList" :key="item.tradeId">
          <view
            class="info-wrap"
            @click="toOrderDetail(item)"
            :class="{ 'no-bottom': item.status == 2 && tradeType == 0}"
          >
            <view class="info-one">
              <view class="price">{{getReceiveCurrency(item.targetCurrencyId)}}{{ parseFloat(item.targetAmount)}}</view>
              <view class="status">{{ item.statusText }}</view>
            </view>
            <view class="info-two">
              <text class="time">{{ item.createTime || "-" }}</text>
              <text class="source"
                >{{$t('order.Receipt')}}: {{ $t('order.' + item.recipientCountry)  }}</text
              >
            </view>
          </view>
          <view
            class="operation-wrap"
            :class="{ 'no-border': item.status == 2 || item.status == 20 }"
          >
            <view
              class="confirm"
              v-if="item.status == 10 && tradeType == 0"
              @click="confirmPayment(item)"
              >{{$t('index.Confirm')}}</view
            >
            <!-- 卖出没有申诉状态 -->
            <view
              class="confirm"
              @click="appealDetails(item)"
              v-if="item.status == 30 && tradeType == 0"
              >{{$t('order.Appeal-Details')}}</view
            >
          </view>
        </view>
      </view>
    </view>
    <!-- 场内 -->
    <view class="order-wrap" v-else>
      <view class="order-list">
        <view
          class="order-item"
          v-for="(item, index) in orderList"
          :key="index"
        >
          <view class="info-wrap">
            <view class="info-gray">
              <view class="price">
                <text>{{ parseFloat(item.targetAmount) }}</text>
                {{ getReceiveCurrency(item.targetCurrencyId) }}
                <text class="iconfont icon-duihuan"></text>
                <text>{{ parseFloat(item.sourceAmount) ||'0.00' }}</text>
                {{ getReceiveCurrency(item.sourceCurrencyId) }}
              </view>
              <view class="status">{{ item.statusText }}</view>
            </view>
            <view class="info-gray">
              <text class="gray">{{$t('order.Exchange-rate')}}</text>
              <text class="gray">{{
                    parseFloat(
                      (item.targetAmount / item.sourceAmount).toFixed(
                        3
                      )
                    )
                  }}:1</text>
            </view>
            <view class="info-gray">
              <text class="gray">{{$t('order.Name')}}</text>
              <text class="gray">{{ item.userName }}</text>
            </view>
            <view class="info-gray">
              <text class="gray">{{$t('order.order-time')}}</text>
              <text class="gray">{{item.createTime}}</text>
            </view>
            <view class="info-gray">
              <text class="gray">{{$t('order.order-number')}}</text>
              <text class="gray">{{ item.orderNo }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {submitsCertificateA } from '@/services/bourse'
export default {
  props: ["orderList", "tradeScene", "currencyOption", "tradeType"],
  methods: {
    getReceiveCurrency(id) {
      const arr = this.currencyOption?.filter((t) => t.id == id);
      if (arr.length > 0) {
        if (this.tradeScene == 1) {
          return arr[0].symbol;
        } else {
          return arr[0].currency;
        }
      } else {
        return "";
      }
    },
    // 跳转订单详情
    toOrderDetail(item) {
      uni.navigateTo({
        url: `/pagesUser/bourse/orderDetail?orderId=${item.tradeId}&tradeType=0`,
      });
    },
    // 场外交易确认给乙方打款
    async confirmPayment(item) {
      const resp = await submitsCertificateA({
        orderId: item.orderId,
        tradeId:item.tradeId,
      });
      if (!resp.success) return;
      uni.showToast({
        title: this.$t("index.operation-success"),
        icon: "none",
        duration: 1500,
      });
      this.$emit('refresh')
    },
    // 跳转上传凭证页面
    uploadCertificate(item) {
      uni.navigateTo({
        url: `/pagesUser/bourse/OrderAppeal?orderId=${item.orderId}&status=1&tradeId=${item.tradeId}`,
      });
    },
    // 查看申诉详情
    appealDetails(item) {
      uni.navigateTo({
        url: `/pagesUser/bourse/OrderAppeal?orderId=${item.orderId}&status=3`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.order-wrap {
  width: 100%;
  padding: 30rpx;
  box-sizing: border-box;
  background: #f6f6f6;
  .order-list {
    .order-item {
      background: #ffffff;
      border-radius: 20rpx;
      padding: 30rpx;
      margin-bottom: 30rpx;

      .info-wrap {
        padding-bottom: 20rpx;
        &.no-bottom {
          padding-bottom: 0;
        }
        .info-one {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 20rpx;
          .price {
            font-size: 32rpx;
            font-family: HarmonyOS Sans-Medium, HarmonyOS Sans;
            font-weight: 500;
            color: #fe6600;
            line-height: 48rpx;
          }
          .status {
            font-size: 28rpx;
            font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
            font-weight: 400;
            color: #61bdb2;
            line-height: 40rpx;
          }
        }
        .info-two {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 28rpx;
          font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
          font-weight: 400;
          color: #878787;
          line-height: 40rpx;
        }
      }
      .operation-wrap {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-top: 20rpx;
        border-top: 2rpx solid rgba(0, 0, 0, 0.05);
        &.no-border {
          border-top: none;
          padding-top: 0;
        }
        .confirm {
          padding: 0 24rpx;
          height: 64rpx;
          border: 2rpx solid #61bdb2;
          border-radius: 64rpx;
          font-size: 28rpx;
          font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
          font-weight: 400;
          color: #61bdb2;
          line-height: 64rpx;
          text-align: center;
          margin-left: 20rpx;
        }
        .cancel {
          padding: 0 24rpx;
          height: 64rpx;
          border: 2rpx solid #878787;
          border-radius: 64rpx;
          font-size: 28rpx;
          font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
          font-weight: 400;
          color: #878787;
          line-height: 64rpx;
          text-align: center;
          margin-left: 20rpx;
        }
      }
    }
  }
}
.order-wrap {
  width: 100%;
  padding: 30rpx;
  box-sizing: border-box;
  background: #f6f6f6;
  .order-list {
    .order-item {
      background: #ffffff;
      border-radius: 20rpx;
      padding: 30rpx;
      margin-bottom: 30rpx;

      .info-wrap {
        .info-gray {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 28rpx;
          font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
          font-weight: 400;
          color: #878787;
          line-height: 40rpx;
          margin-bottom: 20rpx;
          .status {
            font-size: 28rpx;
            font-family: HarmonyOS Sans-Regular, HarmonyOS Sans;
            font-weight: 400;
            color: #61bdb2;
            line-height: 40rpx;
          }
          .price {
            font-size: 24rpx;
            font-family: HarmonyOS Sans-Medium, HarmonyOS Sans;
            font-weight: 500;
            color: #878787;
            line-height: 36rpx;
            display: flex;
            align-items: center;
            text {
              font-size: 32rpx;
              font-family: HarmonyOS Sans-Medium, HarmonyOS Sans;
              font-weight: 500;
              color: #fe6600;
              margin-right: 8rpx;
            }
            .icon-duihuan {
              color: #878787;
              font-size: 22px;
            }
          }
        }
        .info-gray:nth-last-child(1) {
          margin-bottom: 0;
        }
      }
    }
  }
}
</style>